<template>
  <van-field
    :model-value="modelValue"
    is-link
    readonly
    :label="label"
    :placeholder="`请选择${label}`"
    @click="showPicker = true"
    :required="required"
  />
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker-group
      :title="label"
      :tabs="['选择日期', '选择时间']"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <van-date-picker v-model="currentDate" />
      <van-time-picker v-model="currentTime" />
    </van-picker-group>
  </van-popup>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: String,
    default: () => {
      return ''
    }
  },
  label: {
    type: String,
    default: () => {
      return ''
    }
  },
  required: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
const currentDate = ref([])
const currentTime = ref([])
const showPicker = ref<boolean>(false)
const onConfirm = () => {}
const onCancel = () => {
  showPicker.value = false
}
</script>

<style scoped></style>
